<cds-modal size="sm"
           [open]="open"
           (overlaySelected)="closeModal()">

  <cds-modal-header (closeSelect)="closeModal()">
    <h3 cdsModalHeaderHeading
        i18n>Restore Image</h3>
  </cds-modal-header>

  <section cdsModalContent>
    <form name="restoreForm"
          class="form"
          #formDir="ngForm"
          [formGroup]="restoreForm"
          novalidate>
      <p i18n>To restore&nbsp;
        <kbd>{{ imageSpec }}@{{ imageId }}</kbd>,&nbsp;
        type the image's new name and click&nbsp;
        <kbd>Restore</kbd>.</p>

      <div class="form-item">
        <cds-text-label for="name"
                        i18n
                        [invalid]="restoreForm.showError('name', formDir, 'required')"
                        invalidText="The field is required"
                        cdRequiredField="Name">Name
          <input cdsText
                 name="name"
                 id="name"
                 formControlName="name"
                 autocomplete="off"
                 autofocus>
        </cds-text-label>
      </div>
    </form>
  </section>

  <cd-form-button-panel (submitActionEvent)="restore()"
                        [form]="restoreForm"
                        [submitText]="actionLabels.RESTORE"
                        [modalForm]="true"></cd-form-button-panel>

</cds-modal>
